<!DOCTYPE html>
<html lang="id">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Portofolio Saya</title>
  <style>
    body {
      font-family: 'Poppins', sans-serif;
      margin: 0;
      padding: 0;
      background-color: #fff8f9;
      color: #444;
    }

    header {
      background-color: #fcdde2;
      text-align: center;
      padding: 2rem 1rem;
      border-bottom: 3px solid #f9c9d0;
    }

    header h1 {
      margin: 0;
      color: #c26d7a;
      font-size: 2.2em;
    }

    header p {
      color: #9e5b66;
      margin-top: 0.5rem;
    }

    .container {
      width: 90%;
      max-width: 1000px;
      margin: 2rem auto;
      background: #ffffff;
      border-radius: 12px;
      box-shadow: 0 3px 10px rgba(0,0,0,0.1);
      padding: 2rem;
    }

    .profile {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 2rem;
    }

    .profile img {
      width: 180px;
      height: 180px;
      object-fit: cover;
      border-radius: 50%;
      border: 4px solid #fcdde2;
    }

    .profile-info {
      flex: 1;
    }

    .profile-info h2 {
      color: #c26d7a;
      margin-bottom: 0.5rem;
    }

    .gallery {
      margin-top: 3rem;
    }

    .gallery h3 {
      color: #c26d7a;
      text-align: center;
      margin-bottom: 1.5rem;
    }

    .gallery-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
      gap: 1rem;
    }

    .gallery-grid img {
      width: 100%;
      border-radius: 10px;
      transition: transform 0.3s;
    }

    .gallery-grid img:hover {
      transform: scale(1.05);
    }

    .contact {
      text-align: center;
      margin-top: 3rem;
    }

    .contact h3 {
      color: #c26d7a;
      margin-bottom: 1rem;
    }

    .contact a {
      display: inline-block;
      margin: 0.5rem 1rem;
      text-decoration: none;
      color: white;
      background-color: #f9c9d0;
      padding: 0.6rem 1.2rem;
      border-radius: 8px;
      transition: background-color 0.3s;
    }

    .contact a:hover {
      background-color: #f4a9b5;
    }

    footer {
      text-align: center;
      padding: 1rem;
      background-color: #fcdde2;
      color: #9e5b66;
      margin-top: 2rem;
      font-size: 0.9em;
    }
  </style>
</head>
<body>
  <header>
    <h1>Portofolio Saya</h1>
    <p>Selamat datang di halaman pribadi saya 🌸</p>
  </header>

  <div class="container">
    <section class="profile">
      <img src="foto-saya.jpg" alt="Foto Profil Anda" />
      <div class="profile-info">
        <h2>Nama Lengkap Anda</h2>
        <p>
          Halo! Saya seorang kreator yang menyukai hal-hal estetik dan desain yang lembut.
          Saya memiliki minat di bidang <strong>desain grafis, ilustrasi, dan media sosial</strong>.
          Melalui portofolio ini, saya ingin membagikan sebagian kecil dari karya yang saya buat dengan penuh cinta.
        </p>
      </div>
    </section>

    <section class="gallery">
      <h3>Hasil Karya</h3>
      <div class="gallery-grid">
        <img src="karya1.jpg" alt="Karya 1" />
        <img src="karya2.jpg" alt="Karya 2" />
        <img src="karya3.jpg" alt="Karya 3" />
        <img src="karya4.jpg" alt="Karya 4" />
      </div>
    </section>

    <section class="contact">
      <h3>Hubungi Saya</h3>
      <a href="https://wa.me/nomorwhatsappkamu" target="_blank">WhatsApp</a>
      <a href="https://instagram.com/usernamekamu" target="_blank">Instagram</a>
    </section>
  </div>

  <footer>
    © 2025 Portofolio Pribadi — Dibuat dengan 💕 dan kreativitas
  </footer>
</body>
</html>
